import React, { Component, useState } from 'react'
import {
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Alert,
  Switch,
  ActivityIndicator,
  Platform,
  Image,
  Dimensions,
  FlatList,
} from 'react-native'
import { WebView } from 'react-native-webview'

export default function index() {

  const handleOnMessage = (event) => {
    console.log('handleOnMessage ->', event.nativeEvent.data)
  }

  return (
    <View style={[styles.container]}>
      {/* <DiyWebview /> */}
      <WebView
        style={[styles.webview]}
        source={{ uri: 'https://metaso.cn/' }}
        // source={{ html: `<h1>HelloWorld ~</h1>` }}
        onLoad={() => {
          console.log('onLoad ->', '网页加载完成')
        }}
        onError={() => {
          console.log('onError ->', '网页加载失败')
        }}
        onMessage={handleOnMessage} // window.ReactNativeWebView.postMessage("Hello from WebView");
        mixedContentMode={'always'} // 是否允许WebView从不安全源加载内容：never/always
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#aaa',
  },
  webview: {
    margin: 20,
    borderWidth: 1,
    borderColor: '#5e7ce0',
  }
})
